<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '新增'}配置`,
			size: '620px'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-form-item label="所属事业部" prop="biz_id">
						<cl-select
							v-model="form.biz_id"
							style="width:100%;"
							placeholder="请选择事业部"
							filterable
							:disabled="editing"
							@change="changeBiz"
						>
							<el-option
								v-for="item in business"
								:key="item.biz_id"
								:label="item.biz_name"
								:value="item.biz_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="品牌" prop="bra_id">
						<cl-select
							v-model="form.bra_id"
							placeholder="请选择品牌"
							filterable
							style="width: 100%"
						>
							<el-option
								v-for="item in bizRefData.brand"
								:key="item.bra_id"
								:label="item.bra_name"
								:value="item.bra_id"
							/>
						</cl-select>
					</el-form-item>
				</el-card>
			</el-form-item>
			<el-form-item label="企业微信配置">
				<el-card shadow="never">
					<el-form-item label="企业名称" prop="company_name">
						<el-input v-model.trim="form.company_name" placeholder="请输入企业名称" />
					</el-form-item>
					<el-form-item label="企业ID" prop="corpid">
						<el-row type="flex" align="middle">
							<cl-flex1>
								<el-input v-model.trim="form.corpid" placeholder="请输入企业ID" />
							</cl-flex1>
							<icon-svg name="help" class="ml-1" @click="openHelp(2)" />
						</el-row>
					</el-form-item>
					<el-form-item label="通讯录Secret" prop="wxk_address_book_secret">
						<el-row type="flex" align="middle">
							<cl-flex1>
								<el-input
									v-model.trim="form.wxk_address_book_secret"
									placeholder="请输入通讯录Secret"
								/>
							</cl-flex1>
							<icon-svg name="help" class="ml-1" @click="openHelp(3)" />
						</el-row>
					</el-form-item>
					<el-form-item label="客户管理Secret" prop="wxk_customer_admin_secret">
						<el-row type="flex" align="middle">
							<cl-flex1>
								<el-input
									v-model.trim="form.wxk_customer_admin_secret"
									placeholder="请输入客户管理Secret"
								/>
							</cl-flex1>
							<icon-svg name="help" class="ml-1" @click="openHelp(4)" />
						</el-row>
					</el-form-item>
					<el-form-item label="客户管理回调URL" prop="wxk_customer_callback_url">
						<el-row type="flex" align="middle">
							<cl-flex1 class="mr-1">
								<el-input
									:value="form.wxk_customer_callback_url + form.corpid"
									placeholder="请输入客户管理回调URL"
									disabled
								/>
							</cl-flex1>
							<el-button type="primary" @click="copyCusCallback">
								一键复制
							</el-button>
							<icon-svg name="help" class="ml-1" @click="openHelp(5)" />
						</el-row>
					</el-form-item>
					<el-form-item label="客户管理回调token" prop="wxk_customer_callback_token">
						<el-row type="flex" align="middle">
							<cl-flex1 class="mr-1">
								<el-input
									v-model.trim="form.wxk_customer_callback_token"
									placeholder="请输入客户管理回调token"
								/>
							</cl-flex1>
							<el-button @click="randomGenerate('token')">
								随机生成
							</el-button>
							<el-button
								type="primary"
								v-clipboard:copy="form.wxk_customer_callback_token"
							>
								一键复制
							</el-button>
							<icon-svg name="help" class="ml-1" @click="openHelp(6)" />
						</el-row>
					</el-form-item>
					<el-form-item
						label="客户管理回调EncodongAESKey"
						prop="wxk_customer_callback_key"
					>
						<el-row type="flex" align="middle">
							<cl-flex1 class="mr-1">
								<el-input
									v-model.trim="form.wxk_customer_callback_key"
									placeholder="请输入客户管理回调EncodongAESKey"
								/>
							</cl-flex1>
							<el-button @click="randomGenerate('key')">
								随机生成
							</el-button>
							<el-button
								type="primary"
								v-clipboard:copy="form.wxk_customer_callback_key"
							>
								一键复制
							</el-button>
							<icon-svg name="help" class="ml-1" @click="openHelp(7)" />
						</el-row>
					</el-form-item>
				</el-card>
			</el-form-item>
		</el-form>
		<setting-help ref="help" />
	</cl-drawer>
</template>
<script>
import { apiHost } from "@/config/env";
import { copy } from "@/cool/modules/base";
import SettingHelp from "./setting-help";
let uri = new URL(apiHost);
export default {
	components: {
		SettingHelp
	},
	data() {
		return {
			saving: false,
			editing: false,
			form: {
				id: undefined,
				biz_id: "",
				bra_id: "",
				company_name: "",
				corpid: "",
				wxk_address_book_secret: "",
				wxk_customer_callback_url: `${apiHost}/workwechatnotify?echostr=1&corpid=`,
				wxk_customer_admin_secret: "",
				wxk_customer_callback_token: "",
				wxk_customer_callback_key: "",
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				company_name: [{ required: true, message: "请输入企业名称" }],
				corpid: [{ required: true, message: "请输入企业ID" }],
				wxk_address_book_secret: [{ required: true, message: "请输入通讯录Secret" }],
				wxk_customer_admin_secret: [{ required: true, message: "请输入客户管理Secret" }],
				wxk_customer_callback_url: [{ required: true, message: "请输入客户管理回调URL" }],
				wxk_customer_callback_token: [
					{ required: true, message: "请输入客户管理回调Token" }
				],
				wxk_customer_callback_key: [
					{ required: true, message: "请输入客户管理回调EncodongAESKey" }
				],
			},
			// 品牌列表
			brandList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data = {}) {
			this.editing = editing;
			this.$refs.drawer.create(async () => {
				this.reset();
				if (editing) {
					Object.keys(this.form).forEach(k => {
						if (k == "wxk_customer_callback_url") return;
						data[k] != undefined && (this.form[k] = data[k]);
					});
				}
				this.init();
			});
		},
		openHelp(index = 1) {
			this.$refs.help.open(index);
		},
		//切换事业部
		changeBiz() {
			this.form.bra_id = "";
			this.init();
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
		},
		copyCusCallback(e) {
			const { corpid } = this.form;
			if (!corpid) {
				this.$message.warning("请先填写企业ID");
				return;
			}
			copy(`${apiHost}/workwechatnotify?echostr=1&corpid=${corpid}`, e);
		},
		// 随机生成
		randomGenerate(type) {
			this.form["wxk_customer_callback_" + type] = this.randomString(
				type == "token" ? 15 : 43
			);
		},
		randomString(len = 32) {
			/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
			let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
			let maxPos = chars.length;
			let str = "";
			for (let i = 0; i < len; i++) {
				str += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return str;
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.form.biz_id = this.getCurrBiz();
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				let form = { ...this.form };
				await this.$service.workwechat[this.editing ? "update" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success(`${this.editing ? "修改" : "新增"}配置成功`);
				this.$emit("confirm", !this.editing);
				this.reset();
				this.close();
			});
		}
	}
};
</script>
